<template>
 
    <div style="display: flex;justify-content: space-between;margin: 0 0 30px 0;">
  
      <div>
        <a-card hoverable style="width: 270px;height: 100px;">
          <div style="display: flex;">
            <div style="margin: 11px 15px 0 0;"> <span style="font-size: 30px;background-color: #007bff;color: #fff;padding: 5px;" class="iconfont icon-huabanfuben"></span></div>
            <div>
              <div style="font-size: 20px;"><b><a-statistic  :precision="2" :value="112893" /></b></div>
              <div style="font-size: 14px;color: rgb(150,150,150);margin: 8px 0 0 0;">总人数(个)</div>
            </div>
          </div>
        
         、
    </a-card>
      </div>
      <div>
        <a-card hoverable style="width: 270px;height: 100px;">
          <div style="display: flex;">
            <div style="margin: 9px 15px 0 0;"> <span style="font-size: 30px;background-color: #28a745;color: #fff;padding: 5px;" class="iconfont icon-zhuce"></span></div>
            <div>
              <div style="font-size: 20px;"><b>189</b></div>
              <div style="font-size: 14px;color: rgb(150,150,150);margin: 8px 0 0 0;">今天注册人数(个)</div>
            </div>
          </div>
        
         、
    </a-card>
      </div>
      <div>
        <a-card hoverable style="width: 270px;height: 100px;">
          <div style="display: flex;">
            <div style="margin: 9px 15px 0 0;"> <span style="font-size: 30px;background-color: #ffc107;color: #fff;padding: 5px;" class="iconfont icon-huoyuedu"></span></div>
            <div>
              <div style="font-size: 20px;"><b>1999</b></div>
              <div style="font-size: 14px;color: rgb(150,150,150);margin: 8px 0 0 0;">今天活跃度(个)</div>
            </div>
          </div>
        
         、
    </a-card>
      </div>
      <div>
        <a-card hoverable style="width: 270px;height: 100px;">
          <div style="display: flex;">
            <div style="margin: 9px 15px 0 0;"> <span style="font-size: 30px;background-color: #dc3545;color: #fff;padding: 5px;" class="iconfont icon-dengjizongshu"></span></div>
            <div>
              <div style="font-size: 20px;"><b>1129939</b></div>
              <div style="font-size: 14px;color: rgb(150,150,150);margin: 8px 0 0 0;">总数(个)</div>
            </div>
          </div>
        
         、
    </a-card>
      </div>
    </div>
    <div style="display: flex;justify-content: space-between;margin: 40px 0;">
      <div>
          <a-card hoverable style="border: none;z-index: 9999999;">
      <div style="width: 575px;border: 1px solid rgb(240,240,240);padding: 0 10px;">
        <div style="display: flex;justify-content: space-between;font-size: 14px;margin: 20px 0;">
          <div>今天文章最新数据</div>
          <div style="color: #007bff;">需要关注的数据及处理事项</div>
  
        </div>
    <div style="display: flex;width: 565px;padding: 0 0 20px 0;flex-wrap: wrap;">
      <div v-for="(item,q) in articles" :key="index" style="margin: 10px 5px 0 0;">
        <div class="bydw" @click="active(q)" :class="[index==q? 'actives':'']">
       
            <div style="font-size: 18px;">
              <b>{{ item.article_count }}</b>
            </div>
            <div style="font-size: 14px;">
             
              {{ item.nickname }}
            </div>
    </div>
      </div>
    </div>
  </div>
</a-card>
     <a-card hoverable style="border: none;margin: 10px 0 0 0;padding: 0;">
  <div style="width: 575px;border: 1px solid rgb(240,240,240);padding: 0 10px;margin: 20px 0 0 0;">
        <div style="display: flex;justify-content: space-between;font-size: 14px;margin: 20px 0;">
          <div>今天收藏最新数据</div>
          <div style="color: #007bff;">需要关注的数据及处理事项</div>
  
        </div>
    <div style="display: flex;width: 565px;padding: 0 0 10px 0;flex-wrap: wrap;">
      <div v-for="(item,q) in articless" :key="q">
        <div class="bydw" :class="[indexs==q? 'actives':'']" @click="actives(q)" style="margin: 10px 5px 0 0;">
       
            <div style="font-size: 18px;">
              <b>{{ item.fav_count }}</b>
            </div>
            <div style="font-size: 14px;">
             
              {{ item.nickname }}
            </div>
    </div>
      </div>
    </div>
  </div>
  </a-card>
  </div>
    
   <div style="text-align: center;">
  
   
     <a-card hoverable style="width: 570px;height: 320px;text-align: center; box-shadow: 0px 0px 5px 2px rgb(240,240,240);">
      <template #cover>
        <div style="width:560px;height: 300px;margin: 10px 5px;" id="qq">
  
  </div>
      </template>
      <template #actions>
      
      </template>
      
    </a-card>
  </div>
  </div>
  </template>
  <script setup lang="ts">
  import { number } from '_vue-types@3.0.2@vue-types';
  import {echartsmethods,articles,articless} from '@/views/pages/statis'
  import {ref} from'vue'
  echartsmethods()
  let index=ref<number>(999)
    let indexs=ref<number>(999)
  
  let {listdx}=echartsmethods()
  function active(q:number){
    index.value=q
    
  
  }
  function actives(q:number){
    indexs.value=q
   
  
  }

  </script>
 
  <style scoped>
  .actives{
    background-color: rgb(220,220,220) !important;
  }
  .bydw {
    z-index: 1;
    position: relative;
    font-size: inherit;
    font-family: inherit;
    color: black;
   width: 135px;
   padding: 10px 0;
    outline: none;
    border: none;
    background-color: rgba(230,230,230,0.3);
    overflow: hidden;
    transition: color 0.4s ease-in-out;
    text-align: center;
  }
  
  .bydw::before {
    content: '';
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: rgb(220,220,220);
    transform-origin: center;
    transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
    transition: transform 0.45s ease-in-out;
  }
  
  .bydw:hover {
    cursor: pointer;
    color: #161616;
  }
  
  .bydw:hover::before {
    transform: translate3d(-50%, -50%, 0) scale3d(15, 15, 15);
  }
  </style>